import GridContent from "@/components/PageHeaderWrapper/GridContent";
import PageLoading from "@/components/PageLoading";
import { formList, formTabList } from "@/services/formInteraction";
import { Button, Tabs, Tooltip, message } from "antd";
import React, { Suspense } from "react";
import styles from "./index.less"
import TabPaneModal from "./tabPaneModal";
import FormInteractionList from "./list";
import CreateModal from "./createModal";
import UserSession from "@/UserSession";
import EditPaneModal from "./editPaneModal";
import { postFormCategoryAdd, postFormCategoryEdit, getFormCategoryDel } from "@/services/knowledgeCategory";


class TabCategory extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      tabPaneList: [],
      list:[],
      current:1,
      size:16,
      total:0,
      tabId:"",
      spinning:false,
      search:""
    }
  }

  componentDidMount(){
    this.getTabList()
  }

  getTabList = async () => {
    const { dispatch, match: { params: { id } } } = this.props;
    const res = await formTabList({categoryId:id})
    this.setState({
      tabPaneList:res
    },() => {
      this.getFormList()
    })
  }

  tabPaneManage = () => {
    const { tabPaneList } = this.state;
		this.TabPaneModal.openModal(tabPaneList);
  }
	addManage = () => {
		this.EditPaneModalRef.openModal()
	}
	editManage = () => {
		const { tabPaneList, tabId } = this.state;
		let row = tabPaneList.filter(item => item.id == tabId);
		this.EditPaneModalRef.openModal(row[0]);
	}
	setCategory = async (name, categoryId) => {
		const { dispatch, match: { params: { id }, }, } = this.props;
		let obj = { name, rootCategoryId: id };
		let res = { code: -1, data: false, msg: '操作成功' };
		if (categoryId) {
			obj.id = categoryId;
			res = await postFormCategoryEdit(obj)
		} else {
			res = await postFormCategoryAdd(obj);
		};
		if (res.code === 0) {
			message.success('操作成功')
			this.EditPaneModalRef.closeModal()
		}
	}
	delManage = async () => {
		const { tabPaneList, tabId } = this.state;
		let row = tabPaneList.filter(item => item.id == tabId);
		let res = await getFormCategoryDel({ id: row[0]?.id })
		if (res.code === 0) {
			message.success("操作成功");
			this.setState({ tabId: "" }, () => this.getTabList())
		}
	}

  changeTab = key => {
    this.setState({
      tabId:key,
      current:1,
      search:""
    },() => {
      this.getFormList()
    })
  }

  getFormList = () => {
    this.setState({
      spinning:true
    },async () => {
      const { current,size,tabId,search } = this.state;
      const { dispatch, match: { params: { id } } } = this.props;
      const res = await formList({current,size,categoryId:tabId,rootCategoryId:id,search})
      this.setState({
        spinning:false,
        list:res.records,
        total:res.total
      })
    })
  }

  doSearchByPage = current => {
    this.setState({
      current
    },() => {
      this.getFormList()
    })
  }

  doSearchByQuery = value => {
    this.setState({
      search:value,
      current:1
    },() => {
      this.getFormList()
    })
  }

  changeSearch = e => {
    this.setState({
      search:e.target.value
    })
  }

  openCreateModal = row => {
    this.CreateModal.initModal(row)
  }

  render(){
    const { tabPaneList,list,total,current,size,spinning,search,tabId } = this.state;
    const { dispatch, match: { params: { id } },history } = this.props;
    // const operations = <Button icon='unordered-list' style={{ margin: '12px 0' }} onClick={this.tabPaneManage}  disabled={UserSession.isSystemKnowledge()}>分类管理</Button>
    const operations = UserSession.isSystemKnowledge() ? null : (
      <span style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
				{/* <Button icon='unordered-list' style={{ margin: '12px 0' }} onClick={this.tabPaneManage}>分类管理</Button> */}
				<Tooltip placement="bottom" title="新增分类">
					<Button icon='plus' style={{ margin: '12px 0' }} onClick={this.addManage}></Button>
				</Tooltip>
				{tabId !== '' ? (
					<>
						<Tooltip placement="bottom" title="编辑分类名称">
							<Button icon='form' style={{ margin: '12px 0' }} onClick={this.editManage}></Button>
						</Tooltip>
						<Tooltip placement="bottom" title="删除分类">
							<Button icon='delete' style={{ margin: '12px 0' }} onClick={this.delManage}></Button>
						</Tooltip>
					</>
				) : null}
			</span>
    );
    
    return (
      <GridContent>
        <Suspense fallback={<PageLoading />}>
          <div style={{padding:15}} className={styles.tabCategoryCard}>
            <Tabs
              tabBarExtraContent={operations}
              defaultActiveKey={""}
              onChange={this.changeTab}
            >
              <Tabs.TabPane key={""} tab={"全部"}>
                <FormInteractionList 
                  list={list}
                  total={total}
                  current={current}
                  size={size}
                  spinning={spinning}
                  doSearchByPage={this.doSearchByPage}
                  search={search}
                  changeSearch={this.changeSearch}
                  doSearchByQuery={this.doSearchByQuery}
                  openCreateModal={this.openCreateModal}
                  rootId={id}
                  history={history}
                />
              </Tabs.TabPane>
              {tabPaneList.map((item) => {
								return (
									<Tabs.TabPane key={item.id} tab={item.name}>
                    <FormInteractionList 
                      list={list}
                      total={total}
                      current={current}
                      size={size}
                      spinning={spinning}
                      doSearchByPage={this.doSearchByPage}
                      search={search}
                      changeSearch={this.changeSearch}
                      doSearchByQuery={this.doSearchByQuery}
                      openCreateModal={this.openCreateModal}
                      rootId={id}
                      history={history}
                    />
									</Tabs.TabPane>
								);
							})}
            </Tabs>
          </div>
        

          <TabPaneModal onRef={ref => this.TabPaneModal = ref} tabPaneList={tabPaneList} getTabList={this.getTabList} id={id} />
					<EditPaneModal onRef={ref => this.EditPaneModalRef = ref} setCategory={this.setCategory} getTabList={this.getTabList} />
          <CreateModal onRef={ref => this.CreateModal = ref} tabPaneList={tabPaneList} tabId={tabId} refreshList={this.getFormList} />

        </Suspense>
      </GridContent>
    )
  }
}

export default TabCategory